<template>
    <div class="app-container" v-loading="listLoading">
        <el-form ref="form" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-form-item label="用户名称">
                        <el-input v-model="queryParms.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="用户手机">
                        <el-input v-model="queryParms.phone"></el-input>
                    </el-form-item>
                </el-col>
             
                <el-col :span="12">
                    <el-button type="primary" @click="queryPage">搜索</el-button>
                    <el-button type="success" @click="showAddDialog">新增</el-button>
                </el-col>

                <el-col :span="4">
                    <el-select v-model="app_id" placeholder="选择项目">
                        <el-option
                        v-for="item in projectList"
                        :key="item.app_id"
                        :label="item.name"
                        :value="item.app_id">
                        </el-option>
                    </el-select>
                </el-col>
               
            </el-row>

        </el-form>
       

        <el-table  :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column  label="用户名称">
                <template slot-scope="scope">
                    {{ scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column label="用户账号" >
                <template slot-scope="scope">
                    {{ scope.row.account }}
                </template>
            </el-table-column>
            <el-table-column label="用户头像">
             
                    <template slot-scope="scope">
                    <div class="imgdiv">
                        <img :src="scope.row.avatar">
                    </div>
                </template>
               
            </el-table-column>
            <el-table-column label="用户手机">
                <template slot-scope="scope">
                    {{ scope.row.phone  }}
                </template>
            </el-table-column>
            <el-table-column label="用户身份">
                <template slot-scope="scope">
                    <span>{{ scope.row.role==1?'管理员':"项目用户" }}</span>
                </template>
            </el-table-column>
          
           
            <el-table-column  label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="showEditDialog(scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增项目" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="用户账号" :label-width="formLabelWidth">
                    <el-input v-model="form.account" autocomplete="off" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="用户头像" :label-width="formLabelWidth">
                    <div class="imgMainDiv" v-if="form.avatar">
                        <div class="img_div" style="width: 160px; height: 160px">
                            <el-image 
                                style="width: 160px; height: 160px"
                                :src="form.avatar" 
                                :preview-src-list="form.face_img">
                            </el-image>
                            <i class="el-icon-error" @click="deleteImg(0,0,'avatar')"></i>
                        </div>

                       
                    </div>
                    <div class="upload_div">
                        <i class="el-icon-plus"></i>
                        <input type="file" accept="image/*" @change="changeFile($event,'avatar')"/>
                    </div>
                </el-form-item>
                <el-form-item label="用户手机号" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="off" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入用户密码"></el-input>
                </el-form-item>
                <el-form-item label="用户角色" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.role">
                      
                        <el-radio label="1">管理员</el-radio>
                        <el-radio label="2">项目人员 </el-radio>
                    </el-radio-group>

                </el-form-item>
           
  
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureForm">确 定</el-button>
            </div>
        </el-dialog>

        
    </div>
</template>

<script>
import homeapi from '@/api/tailings_monitoring_service_smos_api.js'
import until from '@/api/until.js'
export default {
    data() {
        return {
            list: null,
            listLoading: true,
            queryParms:{
                page:1,
                page_size:10,
                name:"",
                phone:"",
            },
            form:{
                account:"",
                name:"",
                avatar:"",
                phone:"",
                password:"",
                role:"1",
    
                
            },
            dialogFormVisible:false,
            formLabelWidth:'100px',
            projectList:[],
            app_id:"",
            deviceTypeList:[],
        }
    },
    watch:{
        app_id(){
            until.setCookie("app_id",this.app_id)
            this.getUserList();
        }
    },
    created() {
        

        this.fetchData()
        this.getDeviceType();
    },
    methods: {
        async getDeviceType(){
            let data=await homeapi.Smos_apiDeviceTypesGet();
            if(data.error_code==0){
                this.deviceTypeList=data.data;
            }
        },
        getDviceTypeName(device_type){
            let name=""
            this.deviceTypeList.map(res=>{
                if(res.keyword==device_type){
                    name=res.name;
                }
            })
            return name;
        },
        async fetchData() {
            let form=this.queryParms
            let data=await homeapi.Smos_apiAppPageGet(form);
            if(data.error_code==0){
                this.listLoading=false;
                this.projectList=data.data.list;
                this.$nextTick(()=>{
                    let app_id=until.getCookie("app_id");
                    if(app_id){
                        this.app_id=parseInt(app_id) 
                    }
                    else{
                        this.app_id=data.data.list[0].app_id;
                    }
              
                })
               
                
               
            }
        },
        queryPage(){
            this.queryParms.page=1;
            this.getDeviceList();
        },
        showAddDialog(){
            this.dialogFormVisible=true;
            this.form={
                account:"",
                name:"",
                avatar:"",
                phone:"",
                password:"",
                role:"1",
            }
        },
        async sureForm(){
            if(this.form.id){
                this.editForm();
            }
            else{
                this.addForm();
            }
        },
        async getUserList(){
            let form=this.queryParms;
            form.app_id=this.app_id;
            let data=await homeapi.Smos_apiUserPageGet(form);
            if(data.error_code==0){
                this.list=data.data.list?data.data.list:[];
            }
        },
        async addForm(){
            let form=this.form;
            form.app_id=this.app_id;
            this.listLoading=true;
            let data=await homeapi.Smos_apiUserCreatePost(form);
            console.log(data)
            if(data.error_code==0){
                this.listLoading=false
                this.$message.success("新增成功")
                this.dialogFormVisible=false;
                this.getUserList();

            }
        },
        async editForm(){
            let form=this.form;
            form.app_id=this.app_id;
            form.user_id=form.id;
            this.listLoading=true;
            let data=await homeapi.Smos_apiUserUpgradePut(form);
            if(data.error_code==0){
                this.listLoading=false
                this.$message.success("编辑成功")
                this.dialogFormVisible=false;
                this.getUserList();

            }
        },
        showEditDialog(item){
            this.dialogFormVisible=true;
            this.form=item;
            this.form.role=item.role+''
            this.form.password=""
        },
        async deleteItem(item){
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
             }).then(async () => {
               
                let user_id=item.id
                this.listLoading=true;
                let data=await homeapi.Smos_apiUserDeleteDelete({user_id});
                if(data.error_code==0){
                    this.listLoading=false;
                    this.$message.success("删除成功");
                    this.getUserList();
                }
            }).catch(() => {
                       
             });
        },
        async changeFile(e,type,isArry ){
            
            let file=e.target.files[0];
            var formData = new FormData();
            // 服务端要求参数是 pic1 
            formData.append('image',file);
            console.log(formData)
            this.listLoading=true;
            let data=await homeapi.Smos_apiUpload_imgPost({},formData);
            if(data.error_code==0){
                this.listLoading=false

                if(isArry){
                    this.form[type].push(data.data)
                }
                else{
                    this.form[type]=data.data
                }
            }
        },
        deleteImg(index,isArry,type){
            if(isArry){
              
                this.form[type].splice(index,1)
              
                
            }
            else{
             
                this.form[type]=""
               
            }
        },
    }
}
</script>
<style lang="css" scoped>
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        

    }
    .upload_div i{
        font-size: 32px;
    }
    .imgMainDiv{
       display: flex;
       align-items: center;
       justify-content: flex-start;
       float: left;
    }
    .imgMainDiv img{
        width: 100%;
        height: 100%;
    }
    .img_div{
        position: relative;
    }
    .img_div i{
        position: absolute;
        top: 5px;
        right: 5px;
        color: #F56C6C;
    }




    

    .img_main{
        width: 800px;
        cursor: pointer;
        position: relative;
    }
    .img_main img{
        width: 100%;
    }

    .poiont_div{
        position: absolute;
        top: 0;
        left: 0;
    }
    .poiont_div img{
        width: 19px;
        height: 32px;
    }

    .poiont_div_view{
        position: absolute;
        top: 0;
        left: 0;
    }
    .poiont_div_view img{
        width: 19px;
        height: 32px;
    }
    .upload_div{
        width: 160px;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        position: relative;
        float: left;
        margin-left: 10px;
        

    }
    .upload_div input{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
    }
    .imgdiv{
        width: 120px;
        
    }
    .imgdiv img{
        width: 100%;
       
    }
    .upload_div i{
        font-size: 32px;
    }
</style>